<template>
  <div class="radar">
    <Card>
      <p class="header" slot="title">
        <Icon type="stats-bars"></Icon>Radar
      </p>

      <div ref="ele" class="chart"></div>
    </Card>
  </div>
</template>
<script>
import echarts from "echarts";
import axios from "axios";
export default {
  data() {
    return {
      chart: echarts.init(document.createElement("null")),
      radar_data: []
    };
  },
  async mounted() {
    let chart = echarts.init(this.$refs["ele"]);
    this.chart = chart;
    this.chart.showLoading();
    await this.load_radar_json();
    this.chart.hideLoading();
  },
  computed: {
    ST_location_id_2_name() {
      return this.$store.getters.ST_location_id_2_name;
    },
    ST_location_id_2_color() {
      return this.$store.getters.ST_location_id_2_color;
    },
    echarts_option() {
      return {
        tooltip: {},
        radar: this.radar,
        legend: this.legend,
        series: this.radar_series ? [this.radar_series] : []
      };
    },
    location_ids_sorted() {
      /**@type {number[]} */
      let ids = Object.keys(this.ST_location_id_2_name).map(e => Number(e));
      if (!this.radar_data.length) {
        return ids;
      }
      let obj = {};
      for (let o of this.radar_data) {
        obj[o.location] = o.data;
      }
      // debugger
      let r_ids = ids.sort((a, b) => {
        // debugger;
        let entropy = obj[a]["entropy"] - obj[b]["entropy"];
        if (entropy) {
          return -Math.sign(entropy);
        }
        let sum = obj[a]["sums"] - obj[b]["sums"];
        if (sum) {
          return -Math.sign(sum);
        }

        let shake = obj[a]["shake_intensity"] - obj[b]["shake_intensity"];
        if (shake) {
          return -Math.sign(shake);
        }
        return a - b;
      });
      // debugger;
      return r_ids;
    },
    legend() {
      return {
        type: "scroll",
        orient: "vertical",
        left: 10,
        top: 20,
        bottom: 20,
        data: this.location_ids_sorted.map(e => this.ST_location_id_2_name[e])
      };
    },
    radar() {
      return {
        // shape: 'circle',
        scale: true,
        name: {
          formatter: function(value, indicator) {
            /**@type {string} */
            let v = value;
            while (v.includes("_")) {
              v = v.replace("_", "\n");
            }
            return v;
          },
          textStyle: {
            color: "#fff",
            backgroundColor: "#999",
            borderRadius: 3,
            padding: [3, 5]
          }
        },
        startAngle: 191,
        radius: ["5%", "90%"],
        center: ["62%", "50%"],
        indicator: [
          { name: "buildings", max: 1 },
          { name: "shake_intensity", max: 1 },
          { name: "medical", max: 1 },
          { name: "power", max: 1 },
          { name: "roads_and_bridges", max: 1 },
          { name: "sewer_and_water", max: 1 },
          { name: "sums", max: 1 },
          { name: "1-entropy", max: 1 },
          { name: "1-variance", max: 1 }
        ]
      };
    },
    radar_series() {
      if (!this.radar_data.length) {
        return null;
      }
      /**@type {Array<{value:number[],name:string}>} */
      let arr = [];
      for (let o of this.radar_data) {
        let loc_id = o["location"];
        let d = [
          o.data.buildings,
          o.data.shake_intensity,
          o.data.medical,
          o.data.power,
          o.data.roads_and_bridges,
          o.data.sewer_and_water,
          o.data.sums,
          o.data.entropy,
          o.data.variance
        ];
        arr.push({
          name: this.ST_location_id_2_name[loc_id],
          value: d,
          itemStyle: {
            color: this.ST_location_id_2_color[loc_id]
          }
        });
      }
      return {
        name: "数据完整度",
        type: "radar",
        data: arr,
        emphasis: {
          lineStyle: {
            borderWidth: 5,
            width: 5,
            borderColor: "black",
            color: "black"
          },
          itemStyle: {
            borderWidth: 10,
            borderColor: "#FF0080",
            shadowColor: "rgba(0, 0, 0, 0.5)",
            shadowBlur: 5,
            color: "white"
          }
        }
      };
    }
  },
  methods: {
    load_radar_json() {
      return new Promise(resolve => {
        axios
          .get(
            "http://m.tuniucdn.com/fb2/t1/G4/M00/85/FF/Cii_J10QcvOIbdPBAAAhATw1SmwAAHXVwP_wLQAACEZ70.json?comment=radarv2.2"
          )
          .then(axresp => {
            this.radar_data = axresp.data;
            resolve();
          })
          .catch(axerr => {
            debugger;
            alert(axerr.stack);
          });
      });
    }
  },
  watch: {
    echarts_option: function(val) {
      // debugger;
      this.chart.setOption(val);
    }
  }
};
</script>
<style lang="scss">
.radar {
  .chart {
    width: 100%;
    height: 500px;
  }
}
</style>
